<template>
    <div class="w-100 h-100">
    <containTemplete
     :title="'雨水利用评价'" 
     :secondTitles="['雨水用途情况统计','雨水净化量统计', '雨水综合利用率']"
     :slotWidth="[33,33, 33]"

     >
    
        <template #left>
            <ysytqktj />
        </template>
        <template #middle>
            <div class="w-100 h-100">
                <ysjhl :selectValue="middle_value"></ysjhl>
           
            </div>
        </template>

        <template #right>
            <yszhlyl :selectValue="right_value"/>
        </template>

        <template #middle_control>
            <proSelect
            :optionsData="useOptions().year()"
            :defaultSelectValue="new Date().getFullYear()-1"
             v-model:select-value="middle_value"
            :width="100"
            > </proSelect>
        </template>

        <template #right_control>
            <proSelect
            :optionsData="useOptions().year()"
            :defaultSelectValue="new Date().getFullYear()-1"
             v-model:select-value="right_value"
            :width="100"
            > </proSelect>
        </template>
       
    </containTemplete>
    </div>
</template>

<script setup lang='ts'>
import containTemplete from '@/components/project/containTemplete.vue';
import yjdjxxlb from './yjdjxxlb.vue';
import colums_nomal from '@/components/common/echart/colums_nomal.vue';
import ysytqktj from './ysytqktj.vue'
import ysjhl from './ysjhl.vue'
import yszhlyl from './yszhlyl.vue'
import { useOptions } from "@/hook/useOptions";

let  xlabel= ["液位检测仪", "雨量检测仪", "监控视频", "水质检测仪","流量检测仪"];
const echartsColumData=ref([
    {
        name: "一级预警",
        value:[10, 18, 15, 33,20,]
    },
    {
        name: "二级预警",
        value:[20, 18, 5, 13,35]
    },
    {
        name: "三级预警",
        value:[20, 18, 15, 13,20,]
    },
   

])

const middle_value = ref(new Date().getFullYear()-1)

const right_value = ref(new Date().getFullYear()-1)

</script>

<style scoped lang="less" >

</style>